import React from 'react';
import { Tabs } from 'antd';
import { observer, inject } from 'mobx-react';
import Writing from '../features/Writing';
import Polish from '../features/Polish';
import Proofread from '../features/Proofread';
import Analysis from '../features/Analysis';
import { StoreProps } from '../store';
import styles from '../style/assistantTabs.module.css';

// 组件映射
const componentMap: Record<string, React.ReactNode> = {
  'writing': <Writing />,
  'polish': <Polish />,
  'proofread': <Proofread />,
  // 'analysis': <Analysis />
};

const AssistantTabs: React.FC<StoreProps> = ({ documentStore, proofreadStore }) => {
  if (!documentStore) return null;

  const items = documentStore.assistantItems.map(item => ({
    key: item.key,
    label: item.label,
    children: componentMap[item.key]
  }));

  const handleTabChange = (activeKey: string) => {
    documentStore.setActiveTab(activeKey);
  };

  return (
    <div className={styles['statHub-assistant-container']}>
      <div className={styles['statHub-assistant-header']}>
        智能写作助手
      </div>
      <Tabs
        activeKey={documentStore.activeTab}
        items={items}
        onChange={handleTabChange}
        className={styles['statHub-assistant-tabs']}
        tabBarStyle={{
          margin: 0,
          padding: '0 16px',
          borderBottom: '1px solid var(--ant-color-split)'
        }}
      />
    </div>
  );
};

export default inject('documentStore', 'proofreadStore')(observer(AssistantTabs)); 